<div role=" table" class="gf-table-main" id="LinksTable" style="overflow: visible;">
    <div class="gf-custom-scrollbar"
        style="position: relative; overflow: visible; width: 100%; height: auto; min-height: 0px; max-height: 100%;box-sizing: inherit;">
        <div class="gf-view"
            style="position: relative; overflow: visible; margin-right: -8px; margin-bottom: -8px; max-height: calc(100% + 8px);">
            <!-- THEAD -->
            <div class="gf-table-thead gf-unselectable" role="row" ng-mouseup="editor.linksTable.onMouseUp($event)"
                ng-mousemove="editor.linksTable.onMouseMove($event)"
                ng-mouseleave="editor.linksTable.onMouseUp($event)">
                <!-- HEADERS -->
                <!-- EXPAND -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('expand')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('expand')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('expand')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- WHAT -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('what')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('what')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('what')}}</div>
                    </div>
                    <div style="float: right;padding: 6px;width: 6px">
                        <info-popover mode="right-normal">
                            <span ng-bind-html="$GF.popover('Enter shape Id or click on target button', 'LINKS')">
                            </span>
                        </info-popover>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- WHEN -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('when')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('when')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('when')}}</div>
                    </div>
                    <div style="float: right;padding: 6px;width: 6px">
                        <info-popover mode="right-normal">
                            <span ng-bind-html="$GF.popover('Select condition to apply link on object.', 'SHAPES')">
                            </span>
                        </info-popover>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- URL -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('url')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('url')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('url')}}</div>
                    </div>
                    <div style="float: right;padding: 6px;width: 6px">
                        <info-popover mode="right-normal">
                            <span ng-bind-html="$GF.popover('Enter absolute or relative URL', 'MAPPING#Link')"> </span>
                        </info-popover></label>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- OPTION -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('options')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('options')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('options')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
                <!-- ACTION -->
                <div class="gf-table-columnheader" colspan="1" role="columnheader"
                    ng-style="{'width' : editor.linksTable.getWidth('actions')}">
                    <div ng-attr-title="{{editor.linksTable.getDesc('actions')}}" class="gf-table-title"
                        style="cursor: pointer;">
                        <div>{{editor.linksTable.getLabel('actions')}}</div>
                    </div>
                    <div draggable="false" role="separator" class="gf-table-resizeHandle" style="cursor: ew-resize;"
                        ng-mousedown="editor.linksTable.onMouseDown($event)">
                    </div>
                </div>
            </div>
            <!-- TBODY -->
            <div class="gf-table-body">
                <div role="row" class="gf-table-rows-2 gf-table-rows-resizable"
                    ng-repeat="link in rule.getLinkMaps()"
                    ng-mouseenter="editor.setCurrentMap(link);"
                    ng-mouseleave="editor.unsetCurrentMap();">
                    <!-- CELLS -->
                    <div class="gf-table-row_line"
                        ng-mouseleave="editor.unhighlightXCells(link);"
                        ng-mouseover="editor.highlightXCells(link)">
                        <!-- EXPAND -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" id="expand" ng-click="link.reduce=!link.reduce"
                            ng-style="{'width' : editor.linksTable.getWidth('expand')}">
                            <div class="gf-table-content gf-unselectable" style="text-align: center; cursor: pointer;">
                                <span>
                                    <i class="fa fa-chevron-right" title="Expand/Collapse for detail"
                                        ng-class="{'gf-chevron-init': link.reduce, 'gf-chevron-rotate': link.reduce === false}">
                                    </i>
                                </span>
                            </div>
                        </div>
                        <!-- WHAT/PATTERN -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable"
                            ng-init="link.displayWhatEdit = false;link.whatEdit = false;"
                            ng-mouseleave="link.displayWhatEdit = false;"
                            ng-mouseover="link.displayWhatEdit = true;"
                            ng-style="{'width' : editor.linksTable.getWidth('what')}"
                            ng-attr-title="{{link.pattern}}">
                            <div class="gf-table-content" ng-show="link.whatEdit !== true"
                                ng-dblclick="link.whatEdit = true;">
                                {{link.pattern}}
                            </div>
                            <div ng-show="link.displayWhatEdit === true && link.whatEdit !== true"
                                ng-click="link.whatEdit = true;$GF.setFocus( link.uid + '-what' )" title="Edit pattern"
                                class="gf-icon-action gf-icon-edit gf-icon-oncontent gf-icon-withcontent">
                            </div>
                            <div ng-show="link.displayWhatEdit === true && link.whatEdit !== true && !editor.flowchartHandler.isMapping(link)"
                                ng-click="editor.flowchartHandler.setMap(link, getLinkMapOptions())"
                                class="gf-icon-action gf-icon-target gf-icon-withcontent"
                                title="Select a text in diagram">
                            </div>
                            <input type="text" style="margin-right: 2px;width : 100%"
                                ng-attr-id="{{link.uid + '-what'}}"
                                ng-show="link.whatEdit === true"
                                class="gf-form-input" ng-model="link.pattern"
                                ng-model-onblur ng-blur="link.whatEdit = false;"
                                bs-typeahead="rule.getLinkMapOptions().identByProp !== 'metadata' ? editor.getCellNamesTypeHead : editor.getCellNamesMD"
                                data-min-length="0" data-items="100" data-placement="right" />
                        </div>
                        <!-- WHEN -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable" ng-mouseleave="link.displayWhenEdit = false;"
                            ng-mouseover="link.displayWhenEdit = true;"
                            ng-style="{'width' : editor.linksTable.getWidth('when')}"
                            ng-attr-title="{{$GF.GetT4V( editor.linkOn, link.condition)}}">
                            <!-- {{link.condition}} -->
                            <div class="gf-table-content"
                                style="text-align: left;"
                                ng-dblclick="link.whenEdit = true;$GF.setFocus( link.uid + '-when' )"
                                ng-show="link.whenEdit !== true">
                                {{$GF.GetT4V( editor.linkOn, link.condition)}}
                            </div>
                            <div ng-show="link.displayWhenEdit === true && link.whenEdit !== true"
                                ng-click="link.whenEdit = true;$GF.setFocus( link.uid + '-when' )" class="gf-icon-action gf-icon-edit gf-icon-withcontent"
                                title="Edit condition">
                            </div>
                            <select class="gf-form-input" ng-model="link.condition" style="width:100%;"
                                ng-show="link.whenEdit === true"
                                ng-attr-id="{{link.uid + '-when'}}"
                                ng-blur="link.whenEdit = false;"
                                ng-options="c.value as c.text for c in editor.linkOn" ng-change="editor.onRulesChange()">
                            </select>
                        </div>
                        <!-- URL -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable"
                            ng-init="link.displayUrlEdit = false;link.urlEdit = false;"
                            ng-mouseleave="link.displayUrlEdit = false;"
                            ng-mouseover="link.displayUrlEdit = true;"
                            ng-style="{'width' : editor.linksTable.getWidth('url')}"
                            ng-attr-title="{{link.url}}">
                            <!-- {{link.url}} -->
                            <div class="gf-table-content" style="text-align: left;"
                                ng-attr-title="{{link.url}}"
                                ng-dblclick="link.urlEdit = true;$GF.setFocus( link.uid + '-url' )"
                                ng-show="link.urlEdit !== true">
                                <span>
                                    {{link.url}}
                                </span>
                            </div>
                            <div ng-show="link.displayUrlEdit === true && link.urlEdit !== true"
                                ng-click="link.urlEdit = true;$GF.setFocus( link.uid + '-url' )" class="gf-icon-action gf-icon-edit gf-icon-withcontent"
                                title="Text or pattern to replace by value">
                            </div>
                            <input style="margin-right: 2px;width : 100%"
                                ng-attr-id="{{link.uid + '-url'}}"
                                type="text" class="gf-form-input"
                                ng-show="link.urlEdit === true"
                                ng-change="editor.onRulesChange()"
                                ng-model="link.url" ng-blur="link.urlEdit = false;"
                                placeholder="Text or pattern to replace by value" />
                        </div>
                        <!-- OPTIONS -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable"
                            ng-style="{'width' : editor.linksTable.getWidth('options')}">
                            <div class="gf-table-content gf-unselectable"
                                style="text-align: left;justify-content: center;">
                                <div ng-click="link.dashboardParams = !link.dashboardParams"
                                    title="Add/Remove the dashboad parameters with url" class="gf-icon-action"
                                    ng-class="{'gf-icon-address-on': link.dashboardParams, 'gf-icon-address-off': !link.dashboardParams}">
                                </div>
                            </div>
                        </div>
                        <!-- ACTION -->
                        <div role="cell" class="gf-table-cells gf-table-cells-resizable"
                            ng-style="{'width' : editor.linksTable.getWidth('actions')}">
                            <div class="gf-table-content gf-unselectable"
                                style="text-align: left;justify-content: center;">
                                <div ng-click="rule.removeLinkMap(link)"
                                    title="Delete this mapping object" class="gf-icon-action gf-icon-remove">
                                </div>
                                <div ng-click="link.hidden=!link.hidden"
                                    title="Enable/Disable this mapping" class="gf-icon-action"
                                    ng-class="{'gf-icon-show': !link.hidden, 'gf-icon-hide': link.hidden}">
                                </div>
                                <div ng-click="link.enableMapping(true)"
                                    title="Select a shape in diagram" class="gf-icon-action"
                                    ng-class="{'gf-icon-target': !link.onMapping, 'gf-icon-empty': link.onMapping}">
                                </div>
                                <div ng-click="rule.cloneLinkMap(link)"
                                    title="Duplicate this mapping" class="gf-icon-action gf-icon-clone">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="gf-table-row_body" ng-show="link.reduce === false">
                        <ng-include src="GFPlugin.getPartialPath() + 'rules/links/linkBody.html'"> </ng-include>
                    </div>
                </div>
            </div>
            <!-- TFOOTER -->
            <div class="gf-table-tfooter gf-unselectable">
                <div class="gf-table-columnfooter" colspan="1">
                    <div class="gf-form-inline">
                        <div class="gf-form" style="margin-right: 5px;">
                            <button class="btn btn-primary btn-small" ng-click="rule.addLinkMap('');"
                            title="Add a link mapping to open a new url">
                            <svg width="16" height="16" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor"
                                    d="M 200 450C 200 435 210 425 225 425C 225 425 425 425 425 425C 425 425 425 225 425 225C 425 210 435 200 450 200C 450 200 550 200 550 200C 565 200 575 210 575 225C 575 225 575 425 575 425C 575 425 775 425 775 425C 790 425 800 435 800 450C 800 450 800 550 800 550C 800 565 790 575 775 575C 775 575 575 575 575 575C 575 575 575 775 575 775C 575 790 565 800 550 800C 550 800 450 800 450 800C 435 800 425 790 425 775C 425 775 425 575 425 575C 425 575 225 575 225 575C 210 575 200 565 200 550C 200 550 200 450 200 450" />
                            </svg>
                            &nbsp;Add a mapping
                        </button>
                        </div>
                        <div class="gf-form" style="margin-right: 5px;">
                            <button class="btn btn-secondary btn-small" ng-click="rule.change();"
                            title="Refresh/Apply">
                            <svg width="16" height="16" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 535 114C 550 128 555 150 547 169C 539 188 521 200 500 200C 379 200 269 273 223 385C 186 474 194 572 242 652C 242 652 253 641 253 641C 262 632 275 626 289 627C 303 627 316 633 325 643C 332 650 336 660 337 670C 337 670 355 793 355 793C 357 809 352 825 341 836C 330 847 314 852 298 850C 298 850 175 832 175 832C 156 830 140 817 134 799C 128 781 133 761 146 747C 146 747 169 725 169 725C 94 615 78 473 130 347C 192 198 338 100 500 100C 513 100 526 105 535 114C 535 114 535 114 535 114M 852 181C 862 190 868 203 868 216C 868 230 863 243 854 253C 854 253 831 275 831 275C 906 385 922 527 870 653C 808 802 662 900 500 900C 482 900 465 891 456 875C 447 860 447 840 456 825C 465 809 482 800 500 800C 621 800 731 727 777 615C 814 526 806 428 758 348C 758 348 747 359 747 359C 733 373 712 377 693 369C 674 362 662 343 662 323C 662 323 662 217 662 217C 662 190 685 167 712 167C 712 167 818 167 818 167C 831 167 843 172 852 181C 852 181 852 181 852 181"/></svg>
                            &nbsp;Refresh
                        </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
